<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<!-- <script type='text/javascript' src='jquery-1.7.2.js'></script> -->
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		<link rel="stylesheet" href="../../layui/css/layui.css" />
		<script type="text/javascript" src="../../layui/layui.all.js"></script>
		<title>login</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#wrap {
				height: 719px;
				width: 100%;
				/* background-image: url(image/beijing.png); */
				background-repeat: no-repeat;
				background-position: center center;
				position: relative;
			}
			
			#head {
				height: 120px;
				width: 100%;
				background-color: #66CCCC;
				text-align: center;
				position: relative;
			}
			
			#foot {
				width: 100%;
				height: 126px;
				background-color: #CC9933;
				position: relative;
			}
			
			#wrap .logGet {
				height: 408px;
				width: 368px;
				position: absolute;
				background-color: #FFFFFF;
				top: 20%;
				right: 15%;
			}
			
			.logC a button {
				width: 100%;
				height: 45px;
				background-color: #ee7700;
				border: none;
				color: white;
				font-size: 18px;
			}
			
			.logGet .logD.logDtip .p1 {
				display: inline-block;
				font-size: 28px;
				margin-top: 30px;
				width: 86%;
			}
			
			#wrap .logGet .logD.logDtip {
				width: 86%;
				border-bottom: 1px solid #ee7700;
				margin-bottom: 60px;
				margin-top: 0px;
				margin-right: auto;
				margin-left: auto;
			}
			
			.logGet .lgD img {
				position: absolute;
				top: 12px;
				left: 8px;
			}
			
			.logGet .lgD input {
				width: 100%;
				height: 42px;
				text-indent: 2.5rem;
			}
			
			#wrap .logGet .lgD {
				width: 86%;
				position: relative;
				margin-bottom: 30px;
				margin-top: 30px;
				margin-right: auto;
				margin-left: auto;
			}
			
			#wrap .logGet .logC {
				width: 86%;
				margin-top: 0px;
				margin-right: auto;
				margin-bottom: 0px;
				margin-left: auto;
			}
			
			.title {
				font-family: "宋体";
				color: #FFFFFF;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				/* 使用css3的transform来实现 */
				font-size: 36px;
				height: 40px;
				width: 30%;
			}
			
			.copyright {
				font-family: "宋体";
				color: #FFFFFF;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				/* 使用css3的transform来实现 */
				height: 60px;
				width: 40%;
				text-align: center;
			}
			
			#foot .copyright .img {
				width: 100%;
				height: 24px;
				position: relative;
			}
			
			.copyright .img .icon {
				display: inline-block;
				width: 24px;
				height: 24px;
				margin-left: 22px;
				vertical-align: middle;
				/* background-image: url(%E7%94%B5%E5%AD%90%E9%82%AE%E4%BB%B6.png); */
				background-repeat: no-repeat;
				vertical-align: middle;
				margin-right: 5px;
			}
			
			.copyright .img .icon1 {
				display: inline-block;
				width: 24px;
				height: 24px;
				margin-left: 22px;
				vertical-align: middle;
				/* background-image: url(%E5%9C%B0%E5%9D%80.png); */
				background-repeat: no-repeat;
				vertical-align: middle;
				margin-right: 5px;
			}
			
			.copyright .img .icon2 {
				display: inline-block;
				width: 24px;
				height: 24px;
				margin-left: 22px;
				vertical-align: middle;
				/* background-image: url(%E8%81%94%E7%B3%BB%E6%96%B9%E5%BC%8F.png); */
				background-repeat: no-repeat;
				vertical-align: middle;
				margin-right: 5px;
			}
			
			#foot .copyright p {
				height: 24px;
				width: 100%;
			}
		</style>
	</head>

	<body>
		<div class="header" id="head">
			<div class="title">用户登录界面</div>

		</div>

		<div class="wrap" id="wrap">
			<div class="logGet">
				<!-- 头部提示信息 -->
				<div class="logD logDtip">
					<p class="p1">登录</p>
					<a href="UserRegister.html">注册</a>
				</div>
				<!-- 输入框 -->
				<div class="lgD">
					<img src="../../img/User.png" width="20" height="20" alt="" />
					<input type="text" class="userEmail" placeholder="输入邮箱" />
				</div>
				<div class="lgD">
					<img src="../../img/password.png" width="20" height="20" alt="" />
					<input type="password" id="userPassword" placeholder="输入用户密码" />
				</div>
				<div class="logC">
					<a target="_self" id="submit"><button id="sub">登 录</button></a>
				</div>
			</div>
		</div>

		<div class="footer" id="foot">
			<div class="copyright">
				<p>tu yang tu seng bo</p>
				<div class="img">
					<i class="icon"></i><span>联系邮箱：qq.com</span>
				</div>

				<div class="img">
					<i class="icon1"></i><span>联系地址：重庆电信职业学院</span>
				</div>

				<div class="img">
					<i class="icon2"></i><span>联系电话：001</span>
				</div>
			</div>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			function checkEmail(str) {
				var re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
				if(!re.test(str) && str != "") {
					layer.msg("邮箱账号格式错误");
					return false;
				}
			}

			$(function() {
				$(".userEmail").blur(function() {
					if($(".userEmail").val() == "") {
						layer.msg("邮箱账号不能为空");
						$("#sub").attr("disabled", "disabled");
					} else {
						$("#sub").removeAttr("disabled");
					}
					checkEmail($(".userEmail").val());
				})

				$("#userPassword").blur(function() {
					if($("#userPassword").val() == "") {
						layer.msg("密码不能为空");
						$("#sub").attr("disabled", "disabled");
					} else {
						$("#sub").removeAttr("disabled");
					}
				})
				$("#submit").click(function() {
					var userEmails = $(".userEmail").val();
					var userPasswords = $("#userPassword").val();
					$.ajax({
						type: "get",
						url: "/server/admin/getUser",
						async: true,
						data:{
							userEmail:userEmails,
							userPassword:userPasswords
						},
						success: function(data) {
							//								logs.codes = data.code;
							if(data.code == 0) {
								localStorage.setItem("userId", data.data)
								layer.msg("登录成功");
								localStorage.setItem("userEmail", userEmails);
								location.href = "/ComeOnProject01/html/userActivity.html"
							} else {
								if(data.data == "账户已登陆") {
									layer.msg(data.data);
								} else {
									layer.msg("账户或密码错误")
									$("#userPassword").val("");
								}
								return false;
							}
						}
					})
					// ComeOnProject01/ ComeOnProject02/

				})
			})

			//			var logs = new Vue({
			//				el: '#wrap',
			//				data:{
			//					codes: ''
			//				},
			//				methods: {
			//
			//				}
			//			});
		</script>
	</body>

</html>